<template>
    <div class="detail_Same">
        <ul>
            <li v-for="item in detailSameList" :key="item.id">
                <img :src="item.picture" alt="">
                <p>{{ item.name }}</p>
                <p>
                    <span style="color:red;">￥{{ item.price }}</span>
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
// import { getSame } from '@/utils/api/detail';
export default {
    data() {
        return {
            // detailSameList: [],
        }
    },
    methods: {
        // async getSameList() {
        //     let res = await getSame();
        //     console.log(res);
        //     this.detailSameList = res.result;
        // }
    },
    mounted() {
        // this.getSameList();
    }
}
</script>

<style lang="scss" scoped>
.detail_Same {
    min-height: 450px;
    background: #fff;
    margin-top: 20px;

    ul {
        width: 100%;
        height: 370px;
        // background-color: red;
        padding: 0 40px;
        display: flex;
        justify-content: space-around;

        li {
            width: 18%;
            height: 80%;
            // background-color: yellow;

            img {
                width: 100%;
                height: 70%;
            }

            p {
                margin-top: 10px;
                text-align: center;
                font-size: 20px;
                overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                white-space: nowrap; //（设置文字在一行显示，不能换行）
                text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
            }
        }
    }
}
</style>